import React from 'react';
import { Card, Space } from 'antd';
import Link from 'components/ZLink'
import PreviewImage from './PreviewImage'
import PreviewAndUpload from './PreviewAndUpload';
import Download from './Download';
import ImageCompression from './ImageCompression';
import PDF from './PDF';

const tabList = [
    {
        key: 'PreviewImage',
        tab: '图片本地预览'
    },
    {
        key: 'PreviewAndUpload',
        tab: '图片本地预览并上传'
    },
    {
        key: 'Download',
        tab: '下载数据'
    },
    {
        key: 'ImageCompression',
        tab: '图片压缩'
    },
    {
        key: 'PDF',
        tab: 'PDF'
    }
]
export default () => {
    const [activeKey, setActiveKey] = React.useState('PreviewImage')
    
    const tabComponentList: any = {
        PreviewImage: <PreviewImage />,
        PreviewAndUpload: <PreviewAndUpload/>,
        Download: <Download/>,
        ImageCompression: <ImageCompression />,
        PDF: <PDF />
    }
    return (
        <Space direction="vertical" size={20} style={{ width: '100%'}}>
            <Card title="相关链接">
                <Link href="https://www.yuque.com/wangpingan/cute-frontend/ttafta" label="你不知道的 Blob"></Link>
            </Card>
            <Card title="注意事项">
                <h3>1. 定义区别</h3>
                <p>ArrayBuffer 对象用于表示通用的，固定长度的原始二进制数据缓冲区。且不能直接操纵 ArrayBuffer 的内容，需要创建一个类型化数组对象或 DataView 对象，该对象以特定格式表示缓冲区，并使用该对象读取和写入缓冲区的内容。</p>
                <p>Blob 类型的对象表示不可变的类似文件对象的原始数据。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了Blob 功能并将其扩展为支持用户系统上的文件。</p>
                <p>Blob 类型只有 slice 方法，用于返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。 对比发现，ArrayBuffer 的数据，是可以按照字节去操作的，而 Blob 只能作为一个完整对象去处理。所以说，ArrayBuffer 相比 Blob 更接近真实的二进制，更底层。</p>
                <h3>其他区别</h3>
                <p>需要使用写入/编辑操作时使用 ArrayBuffer，否则使用 Blob 即可；</p>
                <p>Blob 对象不可变，而 ArrayBuffer 可以通过 TypedArrays 或 DataView 操作；</p>
                <p>Blob 可以位于磁盘、高速缓存内存和其他不同用位置，而 ArrayBuffer 存在内存中，可以直接操作</p>
            </Card>
            <Card
                tabList={tabList}
                activeTabKey={activeKey}
                onTabChange={key => setActiveKey(key)}
            >
                {tabComponentList[activeKey]}
            </Card>

        </Space>
    )
}